<template>
  <div>
    <div class="card-header">
        <span>{{title}}</span>
        <svg t="1678514485802" style="width:14px;height:14px" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3084" width="200" height="200"><path d="M508.8 44.8c-256 0-464 208-464 464s208 464 464 464 464-208 464-464S764.8 44.8 508.8 44.8zM508.8 924.8c-230.4 0-416-185.6-416-416s185.6-416 416-416 416 185.6 416 416S739.2 924.8 508.8 924.8z" p-id="3085" fill="#8a8a8a"></path><path d="M521.6 652.8c12.8 0 22.4-9.6 22.4-22.4l0-428.8c0-12.8-9.6-22.4-22.4-22.4-12.8 0-22.4 9.6-22.4 22.4l0 428.8C496 640 508.8 652.8 521.6 652.8z" p-id="3086" fill="#8a8a8a"></path><path d="M521.6 748.8m-35.2 0a1.1 1.1 0 1 0 70.4 0 1.1 1.1 0 1 0-70.4 0Z" p-id="3087" fill="#8a8a8a"></path></svg>
    </div>
    <div class="card-content">{{count}}</div>
    <div class="card-charts">
        <slot name="charts"></slot>
    </div>
    <div class="card-footer">
        <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
export default {
    name:'',
    props:['title','count']
}
</script>

<style scoped>
.card-header{
    display: flex;
    justify-content: space-between;
    color: #797777;
}
.card-content{
    font-size: 26px;
    padding: 8px 0px;
}
.card-charts{
    height: 50px;
}
.card-footer{
    border-top: 1px solid #eee;
    padding-top: 10px;
    font-size:14px;
}
</style>